<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=width-device,initial-scale=1.0,user-scalable=no" />
		<title>查询用户</title>		
		<link rel="stylesheet" href="js/bootstrap/css/bootstrap.css" />
		<link rel="stylesheet" href="js/datetimepicker/jquery.datetimepicker.css" />
		<style>
			.pagination{
				margin-top: 0!important;
			}
		</style>
	</head>
	<body>
		<div class="container">			
			<!--<ol class="breadcrumb">
				<li><a href="#">人力资源管理系统</a></li>
				<li><a href="#">员工管理</a></li>				
				<li>查询员工数据</li>
			</ol>-->
			
			<h2 class="page-header">查询数据列表</h2>
			<table id="dataTable" class="table table-bordered table-striped">
				<thead>
					<tr>
						<th>用户编号</th>
						<th>用户昵称</th>
						<th>账号</th>
						<th>邮箱</th>
						<th>电话</th>
						<th>网龄</th>
						<th>专业</th>
						<th>职业</th>
						<th>简介</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(user,index) in userData">
						<td>{{user.userId}}</td>
						<td>{{user.userName}}</td>
						<td>{{user.userLoginName}}</td>
						<td>{{user.userEmail}}</td>
						<td>{{user.userPhone}}</td>
						<td>{{user.userHiredate}}</td>
						<td>{{user.job.majors.majorsName}}</td>
						<td>{{user.job.jobName}}</td>
						<td>{{user.userIntro}}</td>
						<td>
							<input type="button" value="注销" class="btn btn-danger btn-sm" @click="del(index,user.userId)"/>
							<!--<input type="button" value="详情" class="btn btn-info btn-sm" @click="toUpdate(emp.empId,index)"/>-->
						</td>
					</tr>				
				</tbody>
			</table>
			<!--分页工具条 -->
			<div id="row">
				<div class="col-sm-4">
					<div id="pageInfo">共{{pager.recordCount}}条数据  {{pager.pageNum}}/{{pager.pageCount}}页</div>
				</div>
				<div class="col-sm-8">
					<nav id="pageNav">
						<ul class="pagination pagination-sm pull-right">
							<li><a href="javascript:;" id="firstPage" @click="query(1)" v-show="pager.pageNum!=1">首页</a></li>
							<li><a href="javascript:;" id="prevPage" @click="query(pager.pageNum-1)" v-show="pager.pageNum!=1">上页</a></li>
							
							<li :class="{active:pager.pageNum==i}" @click="query(i)" v-for="i in pageBtns"><a href="javascript:;">{{i}}</a></li>
							
							<li><a href="javascript:;" id="nextPage" @click="query(pager.pageNum+1)" v-show="pager.pageNum!=pager.pageCount">下页</a></li>
							<li><a href="javascript:;" id="lastPage" @click="query(pager.pageCount)" v-show="pager.pageNum!=pager.pageCount">末页</a></li>
						</ul>
					</nav>
				</div>
			</div>
			<!--增加员工按钮-->
			<!--<div class="row">
				<div class="col-sm-4 col-sm-offset-8">
					<a href="AddEmp.html" class="btn btn-success btn-block">增加新员工</a>
				</div>
			</div>-->
		</div>		
		
		<script type="text/javascript" src="js/vue2.5.js" ></script>
		<script type="text/javascript" src="js/axios.min.js" ></script>
		<script type="text/javascript" src="js/jquery.js" ></script>
		<script type="text/javascript" src="js/global.js" ></script>
		<script type="text/javascript" src="js/bootstrap/js/bootstrap.js" ></script>
		<script type="text/javascript" src="js/layer/layer.js" ></script>
		<script type="text/javascript" src="js/datetimepicker/jquery.datetimepicker.js" ></script>
		<script>			
			//vue实例
			var vue = new Vue({
				el:'.container',
				data:{
					userData:[],//员工数据
					pager:{},//分页数据
					pageBtns:[] //分页按钮数组
				},
				methods:{
					//查询数据方法
					query:function(pageNum){
						
						axios.get(baseUrl + '/user/query',{
								params:{
									pageNum:pageNum,
									pageSize:10
								}
							})
							.then(function(response){
								
								//响应的员工数据集合赋值给数据模型
								this.userData = response.data.list;
								//响应的分页数据赋值给数据模型
								this.pager = response.data.pager;	
								
								//生成分页页码按钮
								var start = this.pager.pageNum - 2;
								var end = this.pager.pageNum + 2;
								
								if (this.pager.pageNum <= 3) {
									start = 1;
									end = 5;
								}
								
								if (end > this.pager.pageCount) {
									end = this.pager.pageCount;
								}
																
								this.pageBtns = [];
								
								for (var i = start;i <= end;i ++) {
									this.pageBtns.push(i);	
								}								
							}.bind(this))
							.catch(function(error){
								layer.msg('获得用户列表失败');
							});
						
					},
					del:function(index , userId){
						var flag = window.confirm('是否确定删除用户数据');
						if(!flag){
							return;
						}
						axios.get(baseUrl + '/user/delete',{
									params:{
										userId:userId
									}
								})
								.then(function(response){
									layer.msg('删除用户成功');
									//前端删除员工数据
									vue.userData.splice(index , 1);
									
								}.bind(this))
								.catch(function(error){
									layer.msg('删除用户失败');
								});
					},
//					toUpdate:function(empId,index){
//						
//						layer.open({
//							title:'员工详情',
//							type:2,
//							area:['700px','800px'],
//							content:'UpdateEmp.html?empId=' + empId + '&index=' + index
//						});
//						
//					}
				},
				mounted:function(){
					this.query(1);					
				}				
			});			
		</script>		
	</body>
</html>